<template>
  <!-- 倒计时设置对话框组件，使用 v-model 控制显示状态 -->
  <app-dialog v-model="dialogVisible">
    <!-- 对话框头部模板，显示标题 -->
    <template #header>
      <!-- 对话框标题 -->
      <h2>选择时间</h2>
    </template>
    <!-- 日期时间选择器，绑定用户选择的时间，设置最小可选时间 -->
    <input type="datetime-local" v-model="selectedTime" placeholder="选择未来时间" :min="getMinDate()" />
    <!-- 对话框底部操作按钮区域 -->
    <div class="dialog-footer">
      <!-- 取消按钮，点击后关闭对话框 -->
      <button @click="updateVisible(false)">取消</button>
      <!-- 确定按钮，点击后确认选择的时间并关闭对话框 -->
      <button type="button" class="primary" @click="confirmTime">确定</button>
    </div>
  </app-dialog>
</template>

<script lang="ts" setup>
// 从 vue 导入响应式相关函数和计算属性类型
import { ref, computed, type ComputedRef } from 'vue';
// 导入自定义对话框组件
import AppDialog from './app-dialog.vue';
// 从状态管理仓库导入倒计时时间仓库
import { useCountdownTimeStore } from '../stores/countdownTimeStore.ts';

/**
 * 创建倒计时时间仓库的实例，用于管理倒计时的目标时间
 */
const countdownStore = useCountdownTimeStore();

/**
 * 通过 defineProps 接收 v-model 的值，用于控制对话框的显示状态
 */
const props = defineProps(['modelValue']);
/**
 * 通过 defineEmits 触发更新事件，用于更新 v-model 的值
 */
const emit = defineEmits(['update:modelValue']);

/**
 * 使用 computed 实现双向绑定，控制对话框的显示状态
 * @returns {boolean} 对话框的显示状态
 */
const dialogVisible: ComputedRef<boolean> = computed({
  /**
   * 获取对话框的显示状态
   * @returns {boolean} 对话框的显示状态
   */
  get: (): boolean => props.modelValue,
  /**
   * 设置对话框的显示状态，并触发更新事件
   * @param {boolean} value - 对话框的显示状态
   */
  set: (value: boolean): void => emit('update:modelValue', value)
});

/**
 * 更新弹窗可见状态的方法，触发更新事件以控制对话框的显示状态
 * @param {boolean} visible - 对话框的显示状态
 */
const updateVisible = (visible: boolean) => {
  emit('update:modelValue', visible);
};

/**
 * 存储用户选择的时间，类型为时间戳或 null
 */
const selectedTime = ref<number | null>(null);

/**
 * 确认选择时间的方法，将选择的时间存储到仓库中并关闭对话框
 */
const confirmTime = (): void => {
  if (selectedTime.value) {
    // 将选择的时间转换为数字类型并存储到仓库中
    countdownStore.setTargetTimestamp(new Date(selectedTime.value).getTime());
    // 关闭对话框
    updateVisible(false);
  }
};

/**
 * 计算最小可选日期，确保用户只能选择当前时间之后的日期
 * @returns {string} 最小可选日期的字符串表示
 */
const getMinDate = (): string => {
  return new Date().toISOString().slice(0, 16);
};
</script>

<style lang="scss" scoped>
// 日期时间选择器样式，设置宽度、内边距、边框和圆角
input[type="datetime-local"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

// 对话框底部操作按钮区域样式，设置顶部外边距和文本对齐方式
.dialog-footer {
  margin-top: 16px;
  text-align: right;

  // 按钮样式，设置内边距、左边距、边框、圆角和鼠标指针样式
  button {
    padding: 8px 16px;
    margin-left: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    // 主要按钮样式，设置背景颜色和文字颜色
    &.primary {
      background-color: #007bff;
      color: white;

      // 鼠标悬停时的样式，加深背景颜色
      &:hover {
        background-color: #0056b3;
      }
    }
  }
}
</style>
